<template>
  <ElForm :model="selectRow.formModuleOption">
    <ElFormItem label="是否多选">
      <el-radio-group v-model="selectRow.formModuleOption.isMultiple">
        <el-radio value="1">是</el-radio>
        <el-radio value="0">否</el-radio>
      </el-radio-group>
    </ElFormItem>
    <ElFormItem label="是否可筛选">
      <el-radio-group v-model="selectRow.formModuleOption.isFilterable">
        <el-radio value="1">是</el-radio>
        <el-radio value="0">否</el-radio>
      </el-radio-group>
    </ElFormItem>
    <ElFormItem label="数据源模式">
      <el-radio-group v-model="selectRow.formModuleOption.moduleType">
        <el-radio value="1">常量</el-radio>
        <el-radio value="2">数据字典</el-radio>
        <el-radio value="3">模型</el-radio>
        <el-radio value="4">SQL</el-radio>
      </el-radio-group>
    </ElFormItem>
    <ElFormItem label-width="0">
      <el-divider class="custom-divider-margin-top">数据源设置</el-divider>
      <div v-show="selectRow.formModuleOption.moduleType === '1'" style="width: 100%">
        <ElButton style="margin-bottom: 10px" type="primary" @click="addConstantSelectOption"
          >新增</ElButton
        >
        <ElTable :data="selectRow.formModuleOption.constantSelectOption" border>
          <ElTableColumn label="序号" type="index" width="70" align="center" :sortable="true" />
          <ElTableColumn label="标签" prop="label" align="center">
            <template #default="scope">
              <ElFormItem :prop="`constantSelectOption[${scope.$index}].label`">
                <ElInput v-model="scope.row.label" placeholder="" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="值" prop="value" align="center">
            <template #default="scope">
              <ElFormItem :prop="`constantSelectOption[${scope.$index}].value`">
                <ElInput v-model="scope.row.value" placeholder="" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isForm" label="操作" align="center">
            <template #default="scope">
              <ElFormItem label-width="125px">
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="delConstantSelectOption(scope)"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <div v-show="selectRow.formModuleOption.moduleType === '2'" style="width: 100%">
        <ElFormItem label="数据字典" prop="dictCode">
          <el-select
            v-model="selectRow.formModuleOption.dictCode"
            filterable
            remote
            reserve-keyword
            placeholder="选择数据字典"
            :remote-method="dictRemoteMethod"
            :loading="dictLoading"
            style="width: 240px"
          >
            <el-option
              v-for="item in dictOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </ElFormItem>
      </div>
      <div v-show="selectRow.formModuleOption.moduleType === '3'" style="width: 100%">
        <ElRow :gutter="24">
          <ElCol :span="8">
            <ElFormItem label="模型列表" prop="modelId">
              <el-select
                v-model="selectRow.formModuleOption.modelId"
                filterable
                remote
                reserve-keyword
                placeholder="选择模型"
                :remote-method="modelRemoteMethod"
                :loading="modelLoading"
              >
                <el-option
                  v-for="item in modelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label="显示" prop="selectLabel">
              <el-select
                v-model="selectRow.formModuleOption.selectLabel"
                filterable
                remote
                reserve-keyword
                placeholder="选择列"
                :remote-method="modelFieldRemoteMethod"
                :loading="modelFieldLoading"
              >
                <el-option
                  v-for="item in modelFieldOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem label="值" prop="selectValue">
              <el-select
                v-model="selectRow.formModuleOption.selectValue"
                filterable
                remote
                reserve-keyword
                placeholder="选择列"
                :remote-method="modelFieldRemoteMethod"
                :loading="modelFieldLoading"
              >
                <el-option
                  v-for="item in modelFieldOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </div>
      <div v-show="selectRow.formModuleOption.moduleType === '4'" style="width: 100%"> 待开发 </div>
    </ElFormItem>
  </ElForm>
</template>
<script setup lang="tsx">
import { ref, nextTick, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { getModelOptionsApi, selectFieldOptionsApi } from '@/api/generate'
import { optionsListApi } from '@/api/dict'
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})
const selectRow = ref(props.currentRow)
const formModuleOption = ref({
  moduleType: '1',
  isMultiple: '0',
  isFilterable: '0',
  constantSelectOption: [
    {
      label: 'select 1',
      value: '1'
    },
    {
      label: 'select 2',
      value: '2'
    },
    {
      label: 'select 3',
      value: '3'
    }
  ]
})
nextTick(() => {
  modelRemoteMethod('')
  dictRemoteMethod('')
})
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    nextTick(() => {
      initData()
    })
  },
  {
    deep: true,
    immediate: true
  }
)
/**
 * 打开配置窗口
 * @param type
 * @param scope
 */
const initData = () => {
  if (!selectRow.value.formModuleOption || selectRow.value.formModuleOption === 'null') {
    console.log('asd', selectRow.value.formModuleOption)
    selectRow.value = {
      ...selectRow.value,
      formModuleOption: formModuleOption.value
    }
  } else {
    if (typeof selectRow.value.formModuleOption !== 'object') {
      selectRow.value.formModuleOption = JSON.parse(selectRow.value.formModuleOption)
    }
  }
}

/**
 * 下拉选择器常量添加
 */
const addConstantSelectOption = () => {
  selectRow.value.formModuleOption.constantSelectOption.push({
    label: '',
    value: ''
  })
}
/**
 * 下拉选择器常量删除
 * @param scope
 */
const delConstantSelectOption = (scope) => {
  selectRow.value.formModuleOption.constantSelectOption.splice(scope.$index, 1)
}

/**
 * 数据字典
 */
const dictLoading = ref(false)
const dictOptions = ref([])
const dictRemoteMethod = async (query) => {
  dictLoading.value = true
  const res = await optionsListApi({ dictName: query })
  if (res.success) {
    dictOptions.value = res.result
  }
  dictLoading.value = false
}
/**
 * 模型
 */
const modelLoading = ref(false)
const modelOptions = ref([])
const modelRemoteMethod = async (query) => {
  dictLoading.value = true
  const res = await getModelOptionsApi({ tableComment: query })
  if (res.success) {
    modelOptions.value = res.result
  }
  modelLoading.value = false
}
/**
 * 模型字段
 */
const modelFieldLoading = ref(false)
const modelFieldOptions = ref([])
const modelFieldRemoteMethod = async (query) => {
  modelFieldLoading.value = true
  const res = await selectFieldOptionsApi({
    id: selectRow.value.formModuleOption.modelId
  })
  if (res.success) {
    modelFieldOptions.value = res.result
  }
  modelFieldLoading.value = false
}
</script>
